<style>
/* --- GLOBÁLNÍ DEFINICE --- */
:root {
    --accent-color: #f0ad4e; /* Oranžová */
}

/* ---------------------------------------------------------------- */
/* A. FIX LAYOUTU (Beze změny) */
/* ---------------------------------------------------------------- */
.p-detail-inner .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: column !important; 
    align-items: center !important; 
}

.p-detail-inner .col-md-4:first-child {
    width: 100% !important; order: -1 !important; 
    padding: 0 15px 25px 15px !important;
    border-bottom: 2px solid var(--accent-color) !important;
    margin-bottom: 0 !important;
}

.p-detail-inner .detail-img {
    width: 100% !important; float: none !important;
    padding-right: 15px !important; box-sizing: border-box !important; order: 1 !important;
}

.p-detail-inner .col-md-4.pull-left {
    width: 100% !important; max-width: 600px !important; 
    float: none !important; padding: 25px !important;
    border: 1px solid var(--accent-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    background-color: #ffffff !important; box-sizing: border-box !important;
    order: 2 !important; margin-top: 20px !important; 
    
    /* Původní plynulost pro hover */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important;
    transform-origin: center !important;
}

/* ---------------------------------------------------------------- */
/* B. ANIMACE PŘI SKROLOVÁNÍ (TRIGGERED BY JS) */
/* ---------------------------------------------------------------- */

/* 1. Počáteční stav (Skrytý) - platí hned po načtení */
.p-detail-inner .col-md-4.pull-left {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    /* Dlouhá transition, která je spouštěna třídou 'is-animated' */
    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.7s ease !important; 
}

/* 2. Koncový stav (Viditelný) - spouští se přidáním třídy */
.p-detail-inner .col-md-4.pull-left.is-animated {
    opacity: 1 !important;
    transform: scale(1) !important;
}


/* ---------------------------------------------------------------- */
/* C. FIX TLAČÍTKA (Ponecháme jen CSS) */
/* ---------------------------------------------------------------- */
.p-detail-inner .btn-add-to-cart,
.p-detail-inner .btn-primary,
.p-detail-inner .btn-main {
    border: 1px solid var(--accent-color) !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    color: var(--accent-color) !important;
    transition: all 0.2s !important;
}

/* CSS Hover pro tlačítko */
.p-detail-inner .btn-add-to-cart:hover,
.p-detail-inner .btn-primary:hover,
.p-detail-inner .btn-main:hover {
    background-color: var(--accent-color) !important;
    color: white !important;
}
</style>
